<%--
  Created by IntelliJ IDEA.
  User: eternal
  Date: 2024/11/9
  Time: 18:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>统计分析</title>
    <link rel="stylesheet" href="../css/admin_yuyue.css" />
    <link rel="stylesheet" href="../css/admin_nav.css" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<jsp:include page="admin.jsp" />
<div class="content">
    <jsp:include page="admin_nav.jsp" />
    <div class="main">
        <!-- 添加三个图表容器 -->
        <div style="display: flex; flex-wrap: wrap; gap: 20px; padding: 20px;">
            <div id="visitChart" style="width: 100%; height: 400px;"></div>
            <div id="rankingChart" style="width: 48%; height: 400px;"></div>
            <div id="serviceChart" style="width: 48%; height: 400px;"></div>
        </div>
        
        <script>
            // 初始化图表
            const visitChart = echarts.init(document.getElementById('visitChart'));
            const rankingChart = echarts.init(document.getElementById('rankingChart'));
            const serviceChart = echarts.init(document.getElementById('serviceChart'));
            
            // 访问量趋势图配置
            visitChart.setOption({
                title: { text: '访问量趋势' },
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: ['2024-11-12', '2024-11-14', '2024-11-16', '2024-11-18'] },
                yAxis: { type: 'value' },
                series: [{
                    name: '访问量',
                    type: 'line',
                    data: [150, 600, 50, 500]
                }]
            });
            
            // 热门家政排名图配置
            rankingChart.setOption({
                title: { text: '热门家政排名' },
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: ['保洁服务', '家政保姆', '家政123', '正规化妆', '法式理疗'] },
                yAxis: { type: 'value' },
                series: [{
                    type: 'bar',
                    data: [140, 45, 30, 20, 10]
                }]
            });
            
            // 服务类型占比图配置
            serviceChart.setOption({
                title: { text: '服务类型占比' },
                tooltip: { trigger: 'item' },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    data: [
                        { value: 35, name: '美甲' },
                        { value: 20, name: '美容' },
                        { value: 25, name: '理疗' },
                        { value: 15, name: '化妆' },
                        { value: 5, name: '美体' }
                    ]
                }]
            });
            
            // 响应式调整
            window.addEventListener('resize', function() {
                visitChart.resize();
                rankingChart.resize();
                serviceChart.resize();
            });
        </script>
    </div>
</div>
</body>
</html>
